import React from 'react';
import { inject, observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';

import { Icon, Tools, Modal, Toast } from 'weaver-mobile';

const getLabel = Tools.getLabel;
const alert = Modal.alert;

@inject('blogAttentionStore')
@withRouter
@observer
export default class AttentionTool extends React.Component {
  constructor(props) {
		super(props);
		// this.apply = this.apply.bind(this);
	}

  // apply = (event) => {
  //   event.stopPropagation(); // 阻止事件冒泡
  //   const { blogAttentionStore : { attentionOpt, attentionMeOpt } } = this.props;
  //   let {attentionStatus, islower, userId, callback, type} = this.props;
  //   if (type === 'myfans') {
  //     if(attentionStatus === '4') {
  //       alert(getLabel(390696, '取消关注后需要重新申请才能再次关注'),getLabel(129256, '确定要取消吗？'),[
  //         {text: getLabel(31129, '取消')},
  //         {text: getLabel(33703, '确认'), onPress: () => {
  //           type === 'myfans' ? attentionMeOpt({attentionStatus, islower, userId},callback) : attentionOpt({attentionStatus, islower, userId},callback)
  //         }}
  //       ])
  //     } else {
  //       attentionMeOpt({attentionStatus, islower, userId},callback)
  //     }
  //   } else {
  //     if(attentionStatus === '1' || attentionStatus === '2') {
  //       alert(getLabel(390696, '取消关注后需要重新申请才能再次关注'),getLabel(129256, '确定要取消吗？'),[
  //         {text: getLabel(31129, '取消')},
  //         {text: getLabel(33703, '确认'), onPress: () => {
  //           attentionOpt({attentionStatus, islower, userId},callback)
  //         }}
  //       ])
  //     } else if(attentionStatus === '4') {
  //       Toast.info(getLabel(384418,'已发送申请'), 1);
  //     }else {
  //       attentionOpt({attentionStatus, islower, userId},callback)
  //     }
  //   }
  // }

  render() {
   /**
		 * attentionStatus
		 1表示单向关注，按钮显示 取消关注。
		 2表示双向关注，按钮显示 取消关注。
		 3表示没有关注关系，且不是上下级关系。 按钮显示 申请关注。
		 4表示没有关注关系，且不是上下级关系，且已发送申请。按钮显示 已发送申请。
		 5表示没有关注关系，且是上下级关系。按钮显示 添加关注。
		 isreceive==0,不允许申请关注
		 */

        // func = this.apply,
       let text,type,
        className = 'text-info active',
        { isreceive, attentionStatus ,specialStatus} = this.props;

      if (this.props.type === 'myfans') {
          if(attentionStatus=='1'||attentionStatus=='2'){
              return "";
          }
      }else{
          if(attentionStatus=='3'||attentionStatus=='5'){
              return "";
          }
      }


      if (this.props.type === 'myfans') {
      switch(attentionStatus) {
        case '3': text=getLabel(18659,'已申请');type='blog-yiguanzhu';className='text-info';break;
        case '4': text=getLabel(390725,'互相关注');type='blog-huxiangguanzhu';className='text-info';break;
        default: break;
      }
    } else {
      if(specialStatus=='2'){
       attentionStatus='6';
      }
      switch(attentionStatus) {
        case '1': text=getLabel(384419,"已关注");type='add-attention';className='text-info';break;
        case '2': text=getLabel(390725,'互相关注');type='blog-huxiangguanzhu';className='text-info';break;
        case '4': text=getLabel(18659,'已申请');type='blog-yiguanzhu';className='text-info';break;
        case '6': text=getLabel(514285,'特别关注');type='special-concern-1' ;className='text-info';break;
        default: break;
      }
    }



    return (
      (isreceive === '0' && attentionStatus === (this.props.type === 'myfans' ? '2' : '3')) 
			? <span />
			: <div className={className}><Icon type={type} size='xxs'/><span style={{marginLeft: 6}}>{text}</span></div>
    )
  }
}